<template>
<div class="contentBox">
    <!--基本信息-->
    <div class="Basics-box">
        <h1 class="Basics-title">
            <h2>基础信息</h2>
            <div class="button-group-right">
                <el-button type="change" @click="personalEdit">修改</el-button>
                <el-button type="detail" @click="personalDetail">详情</el-button>
            </div>
        </h1>
        <el-table ref="multipleTable" :data="BaseDetail" tooltip-effect="dark" style="width: 100%" :border="true">
            <el-table-column label="姓名" min-width="300" prop="name" align="center"></el-table-column>
            <el-table-column prop="idCard" label="身份证号" min-width="300" align="center"></el-table-column>
            <el-table-column prop="birthTime" label="出生日期" show-overflow-tooltip min-width="300" align="center"></el-table-column>
            <el-table-column prop="companyName" label="单位及职务" show-overflow-tooltip min-width="300" align="center"></el-table-column>
        </el-table>
    </div>
    <!--基本结束-->
    <!--档案列表-->
    <div class="archives-list-box mb-10">
        <h1 class="Basics-title">
            <h2>档案列表</h2>
            <div class="button-group-right">
                <el-button type="BasicsBuild" @click="dialogVisible = true;">新建</el-button>
                <el-button type="BasicsMore" @click="archivesList">更多</el-button>
            </div>
        </h1>
        <el-table ref="multipleTable" :data="tableArchives" tooltip-effect="dark" style="width: 100%" border>
            <el-table-column prop="year" label="年份" width="110" align="center"></el-table-column>
            <el-table-column prop="name" label="档案名称" min-width="800"></el-table-column>
            <el-table-column prop="updateTime" label="最后修改日期" width="305" align="center"></el-table-column>
            <el-table-column label="操作" width="197" align="center">
                <template slot-scope="scope">
                    <el-button type="BasicsLook" @click="archiveLook(scope.row)">查看</el-button>
                    <el-button type="BasicsEdit" @click="archiveEdit(scope.row)">编辑</el-button>
                    <!--删除弹窗-->
                    <el-popover placement="top" width="160" v-model="scope.row.istrue">
                        <p>是否要删除此行？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope.row.istrue = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="clearItem(scope.row)">确定</el-button>
                        </div>
                        <el-button type="text" slot="reference">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--档案列表结束-->
    <!--信访举报列表-->
    <div class="archives-list-box">
        <h1 class="Basics-title">
            <h2>信访举报</h2>
            <div class="button-group-right">
                <!-- <el-button type="BasicsBuild">新建</el-button> -->
                <el-button type="BasicsMore" @click="goAddLetter">更多</el-button>
            </div>
        </h1>
        <el-table ref="multipleTable" :data="tableLetters" tooltip-effect="dark" style="width: 100%" border>
            <el-table-column prop="year" label="年份" width="110" align="center"></el-table-column>
            <el-table-column prop="name" label="举报人" width="150" align="center"></el-table-column>
            <el-table-column prop="title" label="举报标题" min-width="500"></el-table-column>
            <el-table-column prop="issueType" label="举报类型" width="169" align="center"></el-table-column>
            <el-table-column prop="createdTime" label="举报日期" width="159" align="center"></el-table-column>
            <el-table-column prop="status" label="受理程度" width="160" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.status==='0'">待处理</div>
                    <div v-if="scope.row.status==='1'">已受理</div>
                    <div v-if="scope.row.status==='2'">已驳回</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button type="BasicsLook" @click="goLetterLookO">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--信访举报表结束-->
    <!--新建档案列表弹窗-->
    <el-dialog title="新建档案列表" :visible.sync="dialogVisible" width="30%">
        <el-form :model="dialogarchives" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label=" 档案分类：" prop="lei">
                <el-select v-model="dialogarchives.lei" placeholder="请选择档案分类">
                    <el-option v-for="item in optionsarchives" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label=" 档案名称：" prop="name">
                <el-input v-model="dialogarchives.name"></el-input>
            </el-form-item>
            <el-form-item label=" 年份：" prop="year">
                <el-input v-model.number="dialogarchives.year"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="archiveNewBuild('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            rules: {
                lei: [{
                    required: true,
                    message: "请选择档案分类",
                    trigger: "blur",
                }, ],
                name: [{
                    required: true,
                    message: "请输入档案名称",
                    trigger: "blur",
                }, ],
                year: [{
                        required: true,
                        message: "请输入年份",
                        trigger: "blur",
                    },
                    {
                        type: "number",
                        message: "年份必须为数字值",
                        trigger: "blur",
                    },
                ],
            },
            optionsarchives: [{
                    value: "1",
                    label: "干部任免审批表",
                },
                {
                    value: "2",
                    label: "干部操办婚丧喜庆事宜报告表",
                },
                {
                    value: "3",
                    label: "干部离职交接廉洁自律情况登记表",
                },
                {
                    value: "4",
                    label: "主动上缴礼金礼品情况登记表",
                },
                {
                    value: "5",
                    label: "干部述责述廉报告",
                },
                {
                    value: "6",
                    label: "干部民主生活会对照检查材料",
                },
                {
                    value: "7",
                    label: "干部受组织处理和党政纪处分情况登记表",
                },
            ],
            dialogarchives: {
                lei: "",
                name: "",
                year: null,
            },
            dialogVisible: false,
            //档案列表
            tableArchives: [],
            //信访列表
            tableLetters: [],
            BaseDetail: [],
        };
    },
    //name控制监督还是检查方便调接口用
    props: ["type", "id"],
    created() {
        this.getpeoson();
    },
    watch: {
        // "$route.path": function (newVal, oldVal) {
        //     console.log(newVal + "---" + oldVal);
        //     if (oldVal === "/index/IncorruptibleArchives/supervise/detailChange") {
        //         this.getpeoson();
        //     }
        // },
    },
    methods: {
        //删除单个数据档案列表
        clearItem(row) {
            console.log(row, "row");
            this.Api.getSuperviseArchiveRemove({
                id: row.id,
            }).then((res) => {
                // console.log(res, "删除单个数据档案列表");
                if (res && res.code === "0") {
                    row.istrue = false;
                    this.getpeoson();
                } else {
                    this.message.error(res.message);
                }
            });
        },
        cancel() {
            this.dialogVisible = false;
            this.$refs["ruleForm"].resetFields();
        },
        //获取基本信息进行展示
        getpeoson() {
            console.log(this.id, "id");
            this.Api.getSuperviseBaseDetail({
                id: this.id,
            }).then((res) => {
                // console.log(res, "基本信息进行展示")
                if (res.code === "0" && res) {
                    this.BaseDetail = [];
                    this.BaseDetail.push(res.data);
                } else {
                    this.$message.error("请求基本信息失败");
                }
            });
            // 监督对象-详情页，获取档案列表
            this.Api.getSuperviseArchivesList({
                id: this.id,
            }).then((res) => {
                // console.log(res, "监督对象-详情页，获取档案列表")
                if (res && res.code === "0") {
                    this.tableArchives = res.data;
                } else {
                    this.$message.error("请求档案列表失败");
                }
            });
            // 监督对象-详情页，信访举报列表
            this.Api.getSuperviseReportList({
                id: this.id,
            }).then((res) => {
                if (res && res.code === "0") {
                    this.tableLetters = res.data;
                    console.log(res, "信访举报列表")
                    let strjsonlist = localStorage.getItem("SET_DICTIONARIES");
                    let jsonList = JSON.parse(strjsonlist);
                    // console.log(jsonList, "jsonList")
                    let downlist = jsonList.filter((item, index) => {
                        return item.typeCode === "ISSUE_TYPE";
                    });
                    // console.log(downlist, "downlist")
                    // let lastObj = downlist.itemList.filter(item => {
                    //     return item.itemValue ===
                    // })
                    this.tableLetters.forEach((item, index) => {
                        downlist[0].itemList.forEach((v, i) => {
                            if (item.issueType === v.itemValue) {
                                item.issueType = v.itemName;
                            }
                        });
                    });
                    // console.log(this.tableLetters, "监督对象-详情页，信访举报列表")
                } else {
                    this.$message.error("请求信访举报列表失败");
                }
            });
        },
        archivesList() {
            this.$router.push({
                name: "ArchivesList",
                query: {
                    id: this.id,
                },
            });
        },
        //基本信息详情详情页面。详情按钮
        personalDetail() {
            //跳转个人信息详情
            this.$router.push({
                name: "detailPersonal",
                query: {
                    id: this.id,
                },
            });
        },
        //基本信息详情编辑页面。修改按钮
        personalEdit() {
            //跳转个人信息修改
            this.$router.push({
                name: "detailChange",
                query: {
                    id: this.id,
                },
            });
        },
        //档案列表查看按钮触发，触发七种不同的查看页面
        archiveLook(row) {
            //监督对象
            var cfg = {
                1: "ArchivesEdit", //干部任免
                2: "OperationalMmatters",
                3: "TurnoverForm",
                4: "GiftRegistration",
                5: "ResponsibilityAndIntegrity",
                6: "DemocraticLife",
                7: "PunishmentList",
            };
            // 监督对象
            this.$router.push({
                name: cfg[row.type],
                query: {
                    id: row.id,
                    type: this.type,
                    isBuildEditLook: 3,
                },
            });
            //干部述责述廉表
            // this.$router.push({
            //     name: "ResponsibilityAndIntegrity",
            // });
            //干部操办事宜报告表
            // this.$router.push({
            //     name: "OperationalMmatters",
            // });
            //处分情况登记表
            // this.$router.push({
            //     name: "PunishmentList",
            // });
            //礼品情况登记表
            // this.$router.push({
            //     name: "GiftRegistration",
            // });
            //离职交接表
            // this.$router.push({
            //     name: "TurnoverForm",
            // });
        },
        //档案列表编辑按钮触发，触发七种不同的编辑页面
        archiveEdit(row) {
            console.log(row, "row")
            // 监督对象
            var cfg = {
                1: "ArchivesEdit", //干部任免
                2: "OperationalMmatters",
                3: "TurnoverForm",
                4: "GiftRegistration",
                5: "ResponsibilityAndIntegrity",
                6: "DemocraticLife",
                7: "PunishmentList",
            };
            // 监督对象
            //干部任免新建
            this.$router.push({
                name: cfg[row.type],
                query: {
                    id: row.id,
                    type: this.type,
                    isBuildEditLook: 2,
                },
            });
            //干部述责述廉表
            // this.$router.push({
            //     name: "ResponsibilityAndIntegrity",
            // });
            //干部操办事宜报告表
            // this.$router.push({
            //     name: "OperationalMmatters",
            // });
            //处分情况登记表
            // this.$router.push({
            //     name: "PunishmentList",
            // });
            //礼品情况登记表
            // this.$router.push({
            //     name: "GiftRegistration",
            // });
            //离职交接表
            // this.$router.push({
            //     name: "TurnoverForm",
            // });
        },
        //档案列表新建按钮触发，触发七种不同的新建页面
        archiveNewBuild(formName) {
            // console.log(typeof (this.dialogarchives.year))
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = false;
                    var cfg = {
                        1: "ArchivesEdit",
                        2: "OperationalMmatters",
                        3: "TurnoverForm",
                        4: "GiftRegistration",
                        5: "ResponsibilityAndIntegrity",
                        6: "DemocraticLife",
                        7: "PunishmentList",
                    };
                    // 监督对象
                    //干部任免新建
                    this.$router.push({
                        name: cfg[this.dialogarchives.lei],
                        query: {
                            archiveName: this.dialogarchives.name,
                            id: this.id,
                            year: this.dialogarchives.year,
                            type: this.type,
                            isBuildEditLook: 1,
                            lei: this.dialogarchives.lei,
                        },
                    });
                    this.$refs["ruleForm"].resetFields();
                } else {
                    return;
                }
            });
        },
        // 信访更多
        goAddLetter() {
            this.$router.push({
                name: "AddLetter",
                query: {
                    id: this.id,
                },
            });
        },
        // 信访查看
        goLetterLookO() {
            this.$router.push({
                name: "LetterLookO",
            });
        },
    },
};
</script>

<style lang="less" scoped>
//基础信息板块
.Basics-box {
    background-color: white;
    padding: 20px;
    margin-bottom: 10px;

    /deep/.el-table {
        //表头盒子
        .el-table__header-wrapper {

            //表头
            .el-table__header {

                //表头
                .has-gutter {
                    tr {
                        th {
                            padding: 11px 0;
                            background-color: #fafafc;

                            .cell {
                                font-size: 14px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 600;
                                color: rgba(0, 0, 0, 0.85);
                            }
                        }
                    }
                }
            }
        }

        //表格内容
        .el-table__body-wrapper {
            .el-table__body {
                tbody {
                    tr {
                        td {
                            padding: 12px 0;

                            .cell {
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(0, 0, 0, 0.85);
                                line-height: 21px;
                            }

                            .upload-box {
                                margin: 0 auto;
                            }
                        }
                    }

                    //修改输入框
                    tr td:nth-child(2) {
                        .cell {
                            .text {
                                input {
                                    width: 562px;
                                    height: 56px;
                                    background: rgba(255, 255, 255, 1);
                                    border-radius: 4px;
                                    border: 1px solid rgba(221, 221, 221, 1);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }
}

//按钮的统一样式
.el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    font-size: 14px;
}

//新建按钮
/deep/.el-button--BasicsBuild {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: rgba(61, 127, 255, 1);
}

//修改按钮
.el-button--change {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: #3d7fff;
}

//详情按钮
// .el-button--detail {
//   background: rgba(255, 255, 255, 1);
//   border-radius: 4px;
//   border: 1px solid rgba(221, 221, 221, 1);
//   color: #333333;
// }
//档案列表查看
//查看按钮
/deep/.el-button--BasicsLook {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    border: 0;
}

//编辑按钮
/deep/.el-button--BasicsEdit {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    margin-left: 14px;
    border: 0;
}

//删除按钮
/deep/.el-button--BasicsClear {
    width: 33px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(22, 119, 255, 1);
    line-height: 22px;
    margin-left: 14px;
    border: 0;
}

//廉政档案列表
.archives-list-box {
    padding: 20px;
    background-color: white;

    /deep/.el-table__header-wrapper {
        .has-gutter {
            tr {
                th {
                    padding: 10px 0;
                    background-color: #fafafa;
                    color: rgba(0, 0, 0, 0.85);
                }
            }
        }
    }
}

.mb-10 {
    margin-bottom: 10px;
}

//廉政档案新建档案
/deep/.el-dialog__wrapper {
    .el-dialog {
        border-radius: 8px 8px 0px 0px;
        width: 430px !important;

        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            padding: 15px 24px 10px;

            .el-dialog__title {
                font-size: 18px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
            }

            .el-dialog__headerbtn {
                top: 13px;
                right: 13px;
            }
        }

        .el-dialog__body {
            padding-bottom: 0px;

            .el-input {
                .el-input__inner {
                    height: 36px;
                    width: 260px;
                }
            }
        }
    }
}

/deep/.el-input__suffix {
    display: none;
}
</style>
